
<%@page contentType="text/html;charset=UTF-8"   language="java"  %>
<%
  	String base = request.getContextPath();
%>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Market Place</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

	<jsp:include page="/pages/common/include.jsp" flush="true"/>
    <link rel="stylesheet" type="text/css" href="<%=base%>/resources/css/mui.picker.css" />
    <link rel="stylesheet" type="text/css" href="<%=base%>/resources/css/mui.poppicker.css" />
    <link rel="stylesheet" href="<%=base%>/resources/css/confirmorder.css" />
    
    <link rel="stylesheet" href="<%=base%>/resources/css/calendar.css" />

    <style>
    
        .btnBox {
            position: inherit;
        }
    </style>

</head>

<body>
	<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
		<!--侧滑菜单部分-->
		<aside id="offCanvasSide" class="mui-off-canvas-left">
			<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<jsp:include page="/pages/common/menu.jsp" flush="true" />
				</div>
			</div>
		</aside>
		<!--主界面部分-->
		<div class="mui-inner-wrap">
			<header class="mui-bar mui-bar-nav" id="headBox">
				<jsp:include page="/pages/common/top.jsp" flush="true" />
			</header>
			<header class="mui-bar mui-bar-nav GreenHeader">
		        <!--<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>-->
		        <h1 class="mui-title">Delivery & Payment</h1>
		        <!--<a class="mui-icon mui-pull-right text">Continue</a>-->
		    </header>
			<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper noHead">
				<div class="mui-scroll">
			        <div class="confirmOrder">
			           	<div class="stepBox">
							<div class="step active">Delivery&nbsp;&&nbsp;Payment</div>
							<div class="step">Summary</div>
							<div class="step">Complete</div>
						</div>
						<div class="delivery">
							<div class="yourOrder">
								<h1>Order List
									<span class="mui-pull-right"><img src="<%=base%>/resources/images/icon/delivery-jt-up.png" /></span>
								</h1>
								<div class="orderList">
									<div class="item">
										<div class="proImg">
											<img src="<%=base%>/resources/images/flower1.png"/>
										</div>
										<div class="mui-media-body">
											<div class="pro-name">Strawberry </div>
											<div class="pro-f-name">rose bouquet</div>
											<div class="pro-f-name">11-12peach  Rpse with Fillers </div> 
											
											<div class="price-font">
												<!--<div class="orange-font">buy 3 get 1 free</div>-->
												<div class="price">$18.90    </div>
											</div>
											
										</div>
										<div class="deleteBtn">
											<img src="<%=base%>/resources/images/icon/delete-icon.png" />
										</div>
									</div>
									<div class="item">
										<div class="proImg">
											<img src="<%=base%>/resources/images/flower2.png"/>
										</div>
										<div class="mui-media-body">
											<div class="pro-name">Strawberry </div>
											<div class="pro-f-name">rose bouquet</div>
											<div class="pro-f-name">11-12peach  Rpse with Fillers </div> 
											<div class="price-font">
												<!--<div class="orange-font">buy 3 get 1 free</div>-->
												<div class="price">$18.90    </div>
											</div>
											
										</div>
										<div class="deleteBtn">
											<img src="<%=base%>/resources/images/icon/delete-icon.png" />
										</div>
									</div>
								</div>
								<div class="totalOrder">Net Total</span><span class="mui-pull-right">$46.50</div>
							</div>
							<div class="main-info">
								<h1>Delivery Method</h1>
								<div class="content">
						            <div class="selectCate hasLogin">
						                <select id="pickerBox" class="pickerBox">
				                          	<option>My Home</option>
				                          	<option>My Office</option>
				                          	<option>Wife's Office</option>
						                </select>
						                <div class="edit-address">
							                <p>
							                	<em>Name：</em>
							                	<input type="text" id="name" class="select" value="Joho" />
							                </p> 
							                <p>
							                	<em></em>
							                	<input type="text" id="surname" class="select" value="Jike" />
							                </p>  
							                <p>
							                	<em>Delivery Method：</em>
							                	<select id="method" class="select">
													<option value="Delivery">Delivery</option>
													<option value="Store pick up">Store pick up</option>
												</select>
							                </p>
						                	<p class="delivery-address">
						                		<em>Delivery address：</em>
						                		<span class="address">Rm 1502 Ma On House,Ma Tung Estate,Ma On Shan,N.T.</span>
						                	</p>
					                		<p class="pick-up-location">
						                		<em>Pick Up Location：</em>
						                		<select id="address" class="select">
													<option value="Fortress Hill Tower (Fo...)">Fortress Hill Tower (Fo...)</option>
													<option value="Fortress Hill Tower (Fo...)">Fortress Hill Tower (Fo...)</option>
												</select>
											</p>
					                		<p>
					                			<em>Contact Number：</em>
					                			<input type="text" id="phone" class="select" value=" 9876 5432" />
					                		</p>
					                	</div>
						            </div>
						            <div class="selectCate noLogin">
						                <div class="edit-address">
							                <p>
							                	<em>Name：</em>
							                	<input type="text" id="name" class="select"  />
							                </p> 
							                <p>
							                	<em></em>
							                	<input type="text" id="surname" class="select" />
							                </p>  
							                <p>
							                	<em>Delivery Method：</em>
							                	<select id="method" class="select">
													<option value="Delivery">Delivery</option>
													<option value="Click and Collect">Click and Collect</option>
												</select>
							                </p>
						                	<p class="delivery-address">
						                		<em>Delivery address：</em>
						                		<input type="text" id="address1" class="select" />
						                	</p>
						                	<p class="delivery-address">
						                		<em></em>
						                		<input type="text" id="address2" class="select" />
						                	</p>
					                		<p>
					                			<em>Contact Number：</em>
					                			<input type="text" id="phone" class="select"  />
					                		</p>
					                	</div>
						            </div>
						            <a href="javascript:void(0)" class="mui-btn"><img src="<%=base%>/resources/images/icon/plusIcon.png"><span>Add New Address</span></a>
						        </div>
							</div>
							
							<div class="delivery-slot">
								<h1>Pick Up Slot</h1>
								<div class="calendar">
									<div class="aboluo-tools">
										<a class="aboluo-month-a-perv mui-icon mui-icon-arrowleft" href="javascript:;"></a>
										<div class="aboluo-calendar-month"></div>
										<div class="aboluo-calendar-select-year"></div>
										<a class="aboluo-month-a-next mui-icon mui-icon-arrowright" href="javascript:;"></a>
									</div>
									<div class="aboluo-rilidiv">
										<table class="aboluo-rilitable" cellspacing="0" cellpadding="0" >
											<thead class="aboluo-rilithead">
												<tr>
													<th>Mon</td>
													<th>Tue</td>
													<th>Wed</td>
													<th>Thu</td>
													<th>Fri</td>
													<th>Sat</td>
													<th>Sun</td>
												</tr>
											</thead>
										</table>
									</div>
								</div>
							</div>
							<div class="time-range">
								<div class="orange-font">
									15/04/2016 Same day delivery requires additional charge 
								</div>
								<div class="time-section">
									<label>9:00 ~11:00</label>
									<label class="usable">11:00 ~ 13:00</label>
									<label class="usable">13:00 ~ 15:00</label>
									<label class="usable">15:00 ~ 17:00</label>
									<label class="usable">17:00 ~ 19:00</label>
									<label class="usable active">19:00 ~21:00</label>
								</div>
							</div>
							<div class="edit-info">
			                    <div class="btnBox">
			                    	<div class="mui-pull-left">
				                    	<a href="javascript:void(0)" class="mui-btn mui-action-back">Back</a>
			                    	</div>
			                    	<div class="mui-pull-right">
			                    		<a href="javascript:void(0)" class="mui-btn payMent">Continue</a>
			                    	</div>
			                    </div>
			                </div>
						</div>
			            <div class="footer" id="footer">
							<jsp:include page="/pages/common/footer.jsp" flush="true" />
						</div>
			        </div>
				</div>
			</div>
			
			 <!--searchbar-->
			<div class="searchBar">
				<jsp:include page="/pages/common/search.jsp" flush="true" />
			</div>
			
			<div class="rightBottom animate"></div>
			
		</div>
	</div>
	 <div id="screen">
		<div class="screenContent paymentBox">
			<div class="alert-title">
				Payment details<span class="mui-icon mui-icon-closeempty"></span>
			</div>
	    	<div class="orderPayment">
	    		<div class="myOrder commonstyle">
	    			<h4>Order List</h4>
		    		<p>Net Total (2items)<span class="mui-pull-right">$46.60</span></p>
	    		</div>
	    		<div class="payMenthod commonstyle">
	    			<h4>Payment Method </h4>
		    		<p class="active">Credit Card</p>
	    		</div>
	    		<div class="security commonstyle">
	    			<h4>Registered Credit Card</h4>
    				<select id="selet-card" class="select-card">
    					<option>**** **** **** *225</option>
    					<option>**** **** **** *2251</option>
    					<option>**** **** **** *2252</option>
    					<option>**** **** **** *2253</option>
    					<option>**** **** **** *2254</option>
    					<option>**** **** **** *2255</option>
    					<option>**** **** **** *2256</option>
    					<option>**** **** **** *2257</option>
    				</select>
	    		</div>
	    		<div class="securityCode commonstyle">
	    			<h4>Security Code<input type="text" id="code" class="code" value="" />
	    			<a href="payment-gateway.html">(?)</a></h4>
	    			<div class="addCreditCard">
	    				<a href="javascript:void(0)" class="mui-btn">
	    					<img src="<%=base%>/resources/images/icon/plusIcon.png" />Add Credit Card</a>
	    			</div>
	    		</div>
	    	</div>
	    	<div class="cardholders">
	    		<ul class="select-delivery">
	    			<li class="active"><h4>Cash on delivery(?)</h4></li>
	    			<li><h4>Cheque on delivery</h4>
	    				<p>(Payee’s name is The Dairy Farm Company Limited,Please note cheque payment will not be accepted until first order has been delivered.) </p>
	    			</li>
	    		</ul>
	    		<div class="coupon">
	    			<h4>E-Coupon<span class="mui-icon mui-pull-right">
	    				<img src="<%=base%>/resources/images/icon/delivery-jt-up.png" />
	    			</span></h4>
	    			<div class="list">
	    				<div class="item">
	    					<h4>10% OFF Discount Coupon</h4>
	    					<span>Terms & Conditions</span>
	    					<p> Expiry Date: 30/11/2016</p>
	    					<a class="mui-btn active">Redeem Now</a>
		    			</div>
		    			<div class="item">
		    				<h4>10% OFF Discount Coupon</h4>
		    				<span>Terms & Conditions</span>
	    					<p> Expiry Date: 30/11/2016</p>
	    					<a class="mui-btn active">Redeem Now</a>
		    			</div>
		    			<div class="item">
		    				<h4>10% OFF Discount Coupon</h4>
		    				<span>Terms & Conditions</span>
	    					<p> Expiry Date: 30/11/2016</p>
	    					<a class="mui-btn">Redeem Now</a>
		    			</div>
	    			</div>
	    		</div>
	    		<div class="inputBox">
	    			<h4>Promotion Code</h4>
	    			<p>Enter Promotion Code    (if any)</p>
	    			<div class="input-btn">
		    			<input type="text" id="pcode" class="pcode" />
		    			<button>Submit</button>
	    			</div>
	    			<h4>Octopus Reward$</h4>
	    			<p>Octopus Card Number</p>
	    			<input type="text" id="pNumber" class="pNumber" />
	    			<p>How to earn Octopus Reward$?</p>
	    			<a href="javascript:void(0)" class="termsConditions">Terms & Conditions</a>
	    			<h4>E-invoice</h4>
	    			<p class="agree-protocol">I want to receive E-invoice</p>
	    		</div>
	    	</div>
	    	<div class="confirmBtn">
		   		<a href="confirm-summary.html" class="mui-btn mui-btn-block continue">Continue</a>
		    </div>
		</div>
	</div>

    <script type="text/javascript" src="<%=base%>/resources/js/confirm/calendar.js" ></script>
    <script src="<%=base%>/resources/js/confirm/flower-confirm-payment.js" type="text/javascript"></script>
    <script src="<%=base%>/resources/js/confirm/flower-confirm-detail.js" type="text/javascript"></script>
    <script>
		
		//主界面和侧滑菜单界面均支持区域滚动；
		mui('#offCanvasSideScroll').scroll();
		mui('#offCanvasContentScroll').scroll();
	</script>
	
	
	
	
</body>

</html>
